<template>
  <div class="followComponent">
    <el-card>
      <div slot="header">
        <span class="title">关注</span>
        <el-button class="btn" type="text">清空所有消息</el-button>
      </div>
      <div class="content">
        <el-row>
          <el-col :span="2">
            <img src="../assets/header.webp" />
          </el-col>
          <el-col :span="19">
            <div class="user">m0_58925292</div>
            <div class="follow-title">
              2021-10-26 通过 博文 "Hadoop大数据综合案例4-Hive数据分析" 关注了你
            </div>
          </el-col>
          <el-col :span="3" class="btns">
            <el-button size="mini" round>回关</el-button>
            <i class="el-icon-delete"></i>
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </div>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="1"
        :hide-on-single-page="true"
      />
    </el-card>
  </div>
</template>
<style scoped>
.followComponent .title {
  font-size: 18px;
  font-weight: bold;
}
.followComponent .btn {
  float: right;
  padding: 3px 0;
}

.content img {
  width: 50px;
  height: 50px;
  border-radius: 50px;
}
.follow-title {
  margin-top: 15px;
  color: #999;
  font-size: 14px;
}
.btns {
  line-height: 45px;
}
.btns .el-button {
  margin-right: 13px;
}
.el-pagination {
  text-align: center;
}
</style>